<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		
		<style type="text/css">
			
			html,
			body {
				width: 100%;
				height: 100%;
				/*overflow: hidden;*/
			}
			* {
				margin: 0;
				padding: 0;
			}
			
			.tipinfo {
				position: absolute;
				z-index: 999;
				top: 20px;
				color: #666666;
				font-size: 18px;
				width: 100%;
				text-align: center;
			}
			
			.su {
				position: relative;
				width: 520px;
				height: 320px;
				border: 1px solid blue;
				border-radius: 8px;
				margin: 0 auto;
				top: 50%;
				margin-top: -170px;
				/*-webkit-transform: scale(1.2);*/
			}
			
			.suphone {
				width: 320px;
				margin-top: -240px;
			}
			
			.box44 {
				position: relative;
				width: 320px;
				height: 320px;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
			}
			.box44 > div {
				position: relative;
				height: 75px;
			}
		
			.box44 > div > div {
				float: left;
				font-size: 24px;
				margin: 5px;
				width: 70px;
				height: 70px;
				line-height: 70px;
				text-align: center;
				background-color: #cccccc;
				border-radius: 10px;
				/*outline: 1px solid red;*/
			}
			
			
			.info {
				position: absolute;
				height: 120px;
				width: 200px;
				top: 100px;
				left: 320px;
			}
			
			.infophone {
				position: absolute;
				top: 320px;
				left: 60px;
				width: 200px;
				height: 120px;
			}
			
			.info > h2 {
				text-align: center;
				padding: 5px;
			}
			.info > .grande {
				text-align: center;
				font-size: 24px;
				background-color: #29D8D0;
				padding: 5px;
				margin: 0 50px;
				border-radius: 10px;
			}
			.info > button {
				position: absolute;
				margin: 5px;
				width: 100px;
				height: 40px;
				left: 50%;
				border: none;
				margin-left: -50px;
				font-size: 18px;
				border-radius: 10px;
				background-color: #cccccc;
				outline: none;
			}
			.info > button:hover {
				background-color: #bbbbbb;
			}
			
			/*.help {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9;
			}*/
			
			body > input {
				position: fixed;
				display: block;
				width: 40px;
				height: 40px;
				margin: 5px;
				bottom: 10px;
				right: 10px;
				opacity: 0;
				z-index: 999;
			}
			body > input:checked + span {
				-webkit-transform: rotate(0);
				-moz-transform: rotate(0);
				-ms-transform: rotate(0);
				-o-transform: rotate(0);
				transform: rotate(0);
			}
			body > input:checked ~ .dialog {
				display: none;
			}
			input + span {
				position: absolute;
				display: block;
				width: 50px;
				height: 50px;
				line-height: 50px;
				background-color: #41A2D8;
				color: #ffffff;
				text-align: center;
				font-size: 32px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				bottom: 10px;
				right: 10px;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				-webkit-transition-duration: 0.5s;
				-moz-transition-duration: 0.5s;
				-ms-transition-duration: 0.5s;
				-o-transition-duration: 0.5s;
				transition-duration: 0.5s;
			}
			
			.dialog {
				position: absolute;
				width: 80%;
				height: 40%;
				background-color: #A3DCF5;
				top: 20%;
				left: 10%;
				font-size: 18px;
				z-index: 999999;
				border-radius: 10px;
				padding: 10px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
				overflow: hidden;
				-webkit-box-shadow: 0 0 10px 3000px rgba(0,0,0,0.2) ;
				-webkit-box-shadow: 0 0 10px 3000px rgba(0,0,0,0.2) ;
				-moz-box-shadow: 0 0 10px 3000px rgba(0,0,0,0.2) ;
				box-shadow: 0 0 10px 3000px rgba(0,0,0,0.2) ;
			}
			.dialog > p {
				margin: 10px 5px;
			}
			.dialog > div {
				margin: 20px 5px;
			}
		</style>
		
	</head>
	<body>
		
		<input type="checkbox" checked="checked" />
		<span>+</span>
		<div class="dialog">
			<p>PC端使用键盘的上下左右</p>
			<p>手机端可以滑动</p>
			<div>
				<a href="apk.apk">Android Download</a><br />
				<a href="ipa.ipa">iPhone Download</a>
				<div>安卓版的目前测试没有问题，水果机的没测试，没机器啊！！！</div>
			</div>
			<p>点击右下角关闭</p>
		</div>
		
		<div class="su">
			
			<div class="box44">
				<div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			
			<div class="info">
				<h2>分数</h2>
				<div class="grande">0</div>
				<button>重新开始</button>
			</div>
			
		</div>
		
		<p class="tipinfo">可以使用键盘 上 下 左 右 按键</p>
	</body>
	
	
	
	
	<script type="text/javascript" src="jquery-1.11.2.min.js" ></script>
	<script type="text/javascript" src="jquery.touchSwipe.js" ></script>
	<script>
		$(function(){
			var sumg = 0; 		// 总分
			var startg = 0;		// 初始时的两个值，不计入分数。
			// 颜色表
			var colors = ["#FAD999","#FDD78D","#FCCC70","#F8C052",
							"#FA9B5A","#F17F47","#F86D47","#F85847",
							"#B0DAB4","#8CD293","#52B75C","#339B3D",
							"#84B3C9","#6EA1BA","#4D8BA8","#1079AB"
							];
			
			
			// 随机出现的行数和列数
			var rhang = Math.floor(Math.random()*4);
			var rlie = Math.floor(Math.random()*4);
			var rnum = Math.random() > 0.5 ? 4 : 2 ;
			
			// 获取所有的 格子
			var tabs = $(".box44 > div");
			
			// 定义矩阵 ，保存数据， 0 表示没有数据
			var infos = [
						[0,0,0,0],
						[0,0,0,0],
						[0,0,0,0],
						[0,0,0,0]
						];
			
			// 判断 横屏还是竖屏
			wh();
			function wh(){
				var w = window.innerWidth
				var h = window.innerHeight;
				if (h > w) {
					$(".su").addClass("suphone");
					$(".info").addClass("infophone");
				}
			}
			
			
			init();
			function init(){
				// 随机两个值
				var t1 = rxy();
				var t2 = rxy();
				startg = t1 + t2;		// 初始的两个值不计入分数
			}
			
			
			printarrs();		// 数组映射到网格
			
			// 遍历数组
			function forinfos(){
				for (var i = 0 ; i < 4 ; i++) {
					console.log(infos[i][0]+":"+infos[i][1]+":"+infos[i][2]+":"+infos[i][3]);
				}
			}
			
			//  用于 ismove 方法的参数
			var before ;
			var after ;
			
			$("body").swipe({
				swipe: function(event, direction, distance, duration, fingerCount) {
//					$(this).text("你用" + fingerCount + "个手指以" + duration + "秒的速度向" + direction + "滑动了" + distance + "像素 ");
					before = infos.toString();
					if (direction == "left") {
						left();
					} else if (direction === "right") {
						right();
					} else if (direction == "up") {
						up();
					} else if (direction == "down") {
						down();
					}
					after = infos.toString();
					ismove();
				}
			});
			
			
			
			// up 38,down 40, left37,right 39 
			window.onkeydown = function(e){
				before = infos.toString();
				
				if (e.keyCode == 37) {
					left();
				} else if (e.keyCode == 39) {
					right();
				} else if (e.keyCode == 38) {
					up();
				} else if (e.keyCode == 40) {
					down();
				}
				after = infos.toString();
				ismove();
			}
			
			// 判断是否没有移动就  不出现新的块
			// 判断是否还有空位
			function ismove(){
				
				if (infos.toString().indexOf("0") >= 0) {
					if (after.toString() != before.toString()) {
						rxy();		// 随机生成一个 随机数
					}
				} else {
					// 判断当数据满了 之后 是否还有可以合并的
					var isnull = true;
					for (var i = 0 ; i < 4 ; i++) {
						for (var j = 0 ; j < 3 ; j++) {
							if (infos[i][j] == infos[i][j+1] && infos[i][j] != 0) {
								isnull = false;
							}
						}
					}
					for (var i = 0 ; i < 4 ; i++) {
						for (var j = 0 ; j < 3 ; j++) {
							if (infos[j][i] == infos[j+1][i] && infos[j][i] != 0) {
								isnull = false;
							}
						}
					}
					if (isnull) {
						alert("没了");
					}
				}
				printarrs();	// 映射网格数据
			}
			
			
			// 把二维数组对应到 网格
			function printarrs(){
				sumg = 0;
				for (var ai = 0 ; ai < 4 ; ai++) {
					for (var bi = 0 ; bi < 4 ; bi++) {
						if (infos[ai][bi]) {
							tabs.eq(ai).children("div").eq(bi).text(infos[ai][bi]);
							sumg += infos[ai][bi];		// 累加总分数
							var num = Math.log(infos[ai][bi]) / Math.log(2); 
							tabs.eq(ai).children("div").eq(bi).css("background-color",colors[num]);
						} else {
							tabs.eq(ai).children("div").eq(bi).text("");
							tabs.eq(ai).children("div").eq(bi).css("background-color","#CCCCCC");
						}
					}
				}
				$(".grande").text(sumg-startg);
			}
			
			
			// 随机一个 不重复的坐标，出现 2 或者 4
			// 向数组里面添加数据
			function rxy(){
				var h = Math.floor(Math.random()*4);
				var l = Math.floor(Math.random()*4);
				var tempnum = 0;
				if (infos[h][l] == 0) {
					tempnum = Math.random() > 0.5 ? 4 : 2;
					infos[h][l] = tempnum;
				} else {
					rxy(); // 如果重复 就回掉
				}
				return tempnum;
			}
			
			
			
			
			function left(){
				for (var li = 0 ; li < 4 ; li++) {
					// 获取一行保存到数组，如果不是有效字符就不储存
					var hang = new Array();
					for (var lj = 0 ; lj < 4 ; lj++) {
						if (infos[li][lj] != 0) {
							hang.push(infos[li][lj]);
						}
					}
					// 数据合并
					for (var lc = 0 ; lc < 4 ; lc++) {
						// 判断第一个数字是否为0 或不存在
						if (hang[lc]) {
							if (hang[lc] == hang[lc+1]) {
								hang[lc] = hang[lc] + hang[lc+1];
								hang[lc+1] = 0;
								lc++;
							}
						}
					}
					// 移除中间 的 0 
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (!hang[lc]) {
							hang.splice(lc,1);
						}
					}
					// 移动位置
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (hang[lc]) {
							infos[li][lc] = hang[lc];
						} else {
							infos[li][lc] = 0;
						}
					}
				}	
			}// end left 
			
			
			
			function right(){
				for (var li = 0 ; li < 4 ; li++) {
					// 获取一行保存到数组，如果不是有效字符就不储存
					var hang = new Array();
					for (var lj = 0 ; lj < 4 ; lj++) {
						if (infos[li][lj] != 0) {
							hang.push(infos[li][lj]);
						}
					}
					// 数据合并   right 总右边合并
					for (var lc = 3 ; lc >= 0 ; lc--) {
						// 判断第一个数字是否为0 或不存在
						if (hang[lc]) {
							if (hang[lc] == hang[lc-1]) {
								hang[lc] = hang[lc] + hang[lc-1];
								hang[lc-1] = 0;
								lc--;
							}
						}
					}
					// 移除中间 的 0 
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (!hang[lc]) {
							hang.splice(lc,1);
						}
					}
					// 移动位置
					hang = hang.reverse();  // 对数组进行反向
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (hang[lc]) {
							infos[li][3-lc] = hang[lc];
						} else {
							infos[li][3-lc] = 0;
						}
					}
				}	
			}// end right
			
			
			function up(){
				for (var li = 0 ; li < 4 ; li++) {
					// 获取一行保存到数组，如果不是有效字符就不储存
					var hang = new Array();
					for (var lj = 0 ; lj < 4 ; lj++) {
						if (infos[lj][li] != 0) {
							hang.push(infos[lj][li]);
						}
					}
					// 数据合并
					for (var lc = 0 ; lc < 4 ; lc++) {
						// 判断第一个数字是否为0 或不存在
						if (hang[lc]) {
							if (hang[lc] == hang[lc+1]) {
								hang[lc] = hang[lc] + hang[lc+1];
								hang[lc+1] = 0;
								lc++;
							}
						}
					}
					// 移除中间 的 0 
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (!hang[lc]) {
							hang.splice(lc,1);
						}
					}
					// 移动位置
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (hang[lc]) {
							infos[lc][li] = hang[lc];
						} else {
							infos[lc][li] = 0;
						}
					}
				}	
			}// end up 
			
			function down(){
				for (var li = 0 ; li < 4 ; li++) {
					// 获取一行保存到数组，如果不是有效字符就不储存
					var hang = new Array();
					for (var lj = 0 ; lj < 4 ; lj++) {
						if (infos[lj][li] != 0) {
							hang.push(infos[lj][li]);
						}
					}
					// 数据合并
					for (var lc = 3 ; lc >= 0 ; lc--) {
						// 判断第一个数字是否为0 或不存在
						if (hang[lc]) {
							if (hang[lc] == hang[lc-1]) {
								hang[lc] = hang[lc] + hang[lc-1];
								hang[lc-1] = 0;
								lc--;
							}
						}
					}
					// 移除中间 的 0 
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (!hang[lc]) {
							hang.splice(lc,1);
						}
					}
					// 移动位置
					hang = hang.reverse();  // 对数组进行反向
					for (var lc = 0 ; lc < 4 ; lc++) {
						if (hang[lc]) {
							infos[3-lc][li] = hang[lc];
						} else {
							infos[3-lc][li] = 0;
						}
					}
				}	
			}// end down 
			
			
			$(".info > button").click(function(){
				for (var ai = 0 ; ai < 4 ; ai++) {
					for (var bi = 0 ; bi < 4 ; bi++) {
						infos[ai][bi] = 0;
					}
				}
				init();
				printarrs();
				$(".info > .grande").text("0");
			})
			
		});
		
	</script>
	
	
</html>




